<template>
  <div class='page-content'>
      <el-table
        :data="userList"
       v-loading="loading"
       style="margin-top: 10px;">
        <el-table-column label="协议类型" prop="name" align="center">
        </el-table-column>
        <el-table-column label="更新时间" prop="updateTime"  align="center"/>
        <el-table-column label="code值" prop="code"  align="center"/>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button  size="mini" type="primary"  @click="showDialog(scope.row)">
              修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    <!--    新增目标-->
    <el-dialog
      :visible.sync="dialogVisible"
      :show-close="false"
      width="50%">
      <div slot="title" class="title-wrapper">
        <div class="close-icon-wrapper" @click="dialogVisible = false">
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="title-text">
          {{ '修改协议' }}
        </div>
      </div>
     <div>
       <editor v-model="content" :value="content"  ref="refEditor" />
     </div>
      <span slot="footer" class="dialog-footer" style="margin-top: 80px">
          <el-button class="confirm-btn"  type="primary" @click="targetEntrySubmit">确 定</el-button>
        <el-button class="cancel-btn" @click="dialogVisible = false">取 消</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>

import editor from "@/components/Editor/QuillEditor.vue"
import { agreementEdit, agreementPage } from '@/api/modular/system/loginManage'
export default {
  name: "management",
  components: {
    editor
  },

  data () {
    return {
      loading: false,
      id:'',
      content:'',
      dialogVisible:false,
      page: {
        pageNo: 1,
        pageSize: 10
      },
      userList: [],
    };
  },
  created() {
    this.getList()
  },
  methods: {
    targetEntrySubmit(){
      agreementEdit({
        id: this.id,
        content: this.content
      }).then(res => {
        if (res.success) {
          this.$message.success('编辑成功')
          this.dialogVisible = false
          this.getList()
        }
      })
    },
    // 分页
    // changePage(page){
    //   page.page? this.page.pageNo = page.page : this.page.pageSize = page.limit
    //   this.getList()
    // },
    // 获取列表
    getList(){
      this.loading = true;
      let query = {
        queryParam: {},
        page:{
          pageNo: 1,
          pageSize: 99,
        }
      }
      agreementPage(query).then(response =>{
        this.userList = response.data.rows
        // this.page.pageNo = response.data.pageNo
        // this.page.pageSize = response.data.pageSize
        // this.page.total = response.data.totalRows
      }).finally(() => {
        this.loading = false;
      });
    },
    // 打开弹窗
    showDialog(scope) {
      if (this.$refs.refEditor && this.$refs.refEditor.$refs && this.$refs.refEditor.$refs.myQuillEditor) {
        this.$refs.refEditor.$refs.myQuillEditor.content = '';
      }

      this.id= scope.id
      this.dialogVisible = true
      this.content = scope.content
      // agreementEdit({ id: scope.row.id }).then((res) => {
      //   if (res.success) {
      //     setTimeout(() => {
      //       this.content = res.data.content
      //     }, 100)
      //   }
      // })
    },
    // changeColumn(columns) {
    //   this.columns = columns
    //   this.$refs.table.doLayout()
    // }
  }
}
</script>

<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;

  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
}
::v-deep .el-dialog__header {
  padding: 0 !important;
  height: 66px;
  background: linear-gradient(
      148deg,
      #3aa1fe 0%,
      #4679fe 28%,
      #3aa1fe 54%,
      #3aa1fe 79%,
      #1753e2 100%
  );
}

::v-deep .el-dialog__body {
  padding-top: 40px !important;
}

::v-deep .el-dialog__footer {
  padding: 0 0 30px !important;
  border: none !important;
}

.title-wrapper {
  position: relative;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;

  .close-icon-wrapper {
    position: absolute;
    left: 0;
    top: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 66px;
    color: #fff;
    //font-size: $xxl-font-size;
    cursor: pointer;
  }

  .title-text {
    //font-size: $lg-font-size;
    color: #ffffff;
  }
}

.dialog-footer {
  display: flex;
  justify-content: center;

  .confirm-btn {
    margin-right: 120px;
    width: 150px;
    height: 42px;
    background: #3aa1fe;
    border-radius: 4px 4px 4px 4px;
    color: #ffffff;
  }

  .cancel-btn {
    width: 150px;
    height: 42px;
    background: #9cafc6;
    border-radius: 4px 4px 4px 4px;
    color: #ffffff;
  }
}
</style>
